<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火灾调查知识库平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .el-menu-demo {
            background-color: #1e40af !important;
        }
        .el-menu--horizontal > .el-menu-item {
            color: white !important;
        }
        .el-menu--horizontal > .el-menu-item:hover {
            background-color: #2563eb !important;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 顶部导航栏 -->
        <div class="shadow-md">
            <div class="container mx-auto">
                <el-menu mode="horizontal" class="el-menu-demo" :ellipsis="false">
                    <el-menu-item class="!px-4">
                        <img src="https://via.placeholder.com/40x40" alt="Logo" class="h-8">
                    </el-menu-item>
                    <el-menu-item index="1">
                        <i class="fas fa-search mr-1"></i> 检索
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="fas fa-robot mr-1"></i> AI检索功能
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                    </el-menu-item>
                    <div class="flex-grow"></div>
                    <el-menu-item index="6">
                        <i class="fas fa-user mr-1"></i> 个人中心
                    </el-menu-item>
                    <el-menu-item index="7">登录</el-menu-item>
                    <el-menu-item index="8">注册</el-menu-item>
                </el-menu>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="container mx-auto mt-8 px-4">
            <!-- 搜索框 -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                <div class="max-w-3xl mx-auto">
                    <el-input
                        placeholder="请输入关键词进行搜索..."
                        class="mb-4"
                        :suffix-icon="Search">
                    </el-input>
                    <div class="flex gap-4 text-sm text-gray-600">
                        <el-radio-group v-model="searchType">
                            <el-radio label="theme">主题</el-radio>
                            <el-radio label="abstract">摘要</el-radio>
                            <el-radio label="keywords">关键词</el-radio>
                            <el-radio label="fulltext">全文</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>

            <!-- 分类导航 -->
            <div class="grid grid-cols-5 gap-4 mb-8">
                <div class="bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:shadow-lg transition-shadow">
                    <i class="fas fa-balance-scale text-2xl text-blue-600 mb-2"></i>
                    <div>消防法律法规</div>
                </div>
                <div class="bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:shadow-lg transition-shadow">
                    <i class="fas fa-file-alt text-2xl text-green-600 mb-2"></i>
                    <div>火调报告</div>
                </div>
                <div class="bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:shadow-lg transition-shadow">
                    <i class="fas fa-building text-2xl text-yellow-600 mb-2"></i>
                    <div>政府文件</div>
                </div>
                <div class="bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:shadow-lg transition-shadow">
                    <i class="fas fa-shield-alt text-2xl text-red-600 mb-2"></i>
                    <div>消防安全</div>
                </div>
                <div class="bg-white rounded-lg shadow-md p-4 text-center cursor-pointer hover:shadow-lg transition-shadow">
                    <i class="fas fa-tools text-2xl text-purple-600 mb-2"></i>
                    <div>消防设备</div>
                </div>
            </div>

            <!-- 搜索结果列表 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold">搜索结果</h2>
                    <div class="flex gap-4">
                        <el-select v-model="sortBy" placeholder="排序方式">
                            <el-option label="最新发布" value="latest"></el-option>
                            <el-option label="最多浏览" value="views"></el-option>
                            <el-option label="最多收藏" value="favorites"></el-option>
                        </el-select>
                    </div>
                </div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="title" label="标题" width="400"></el-table-column>
                    <el-table-column prop="author" label="作者" width="120"></el-table-column>
                    <el-table-column prop="source" label="来源" width="150"></el-table-column>
                    <el-table-column prop="date" label="发布时间" width="150"></el-table-column>
                    <el-table-column prop="heat" label="热度" width="100"></el-table-column>
                    <el-table-column label="操作">
                        <template #default>
                            <el-button type="primary" size="small">查看</el-button>
                            <el-button type="info" size="small">订阅</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref } = Vue
        const { Search } = ElementPlusIconsVue

        createApp({
            setup() {
                const searchType = ref('theme')
                const sortBy = ref('latest')
                const tableData = ref([
                    {
                        title: '某商场火灾事故调查报告',
                        author: '张三',
                        source: '市消防局',
                        date: '2024-01-15',
                        heat: '98'
                    },
                    {
                        title: '电气火灾防范指南2024版',
                        author: '李四',
                        source: '消防研究所',
                        date: '2024-01-10',
                        heat: '85'
                    },
                    // 更多数据...
                ])

                return {
                    searchType,
                    sortBy,
                    tableData,
                    Search
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>
</body>
</html> 